<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="辅助单位录入"
    modal-append-to-body
    append-to-body
    width="600px"
    @close="closeCallback"
  >
    <div style="margin-bottom: 20px;">
      <el-alert
        title="温馨提示"
        type="warning"
        :closable="false"
        style="margin-bottom: 10px;"
      >
        主计量单位通常是商品的最小计量单位，
        而辅助单位则可能是更大的计量单位。
        例如纸巾，主计量单位为 “包”，辅助单位可以为 “箱”,
        辅助单位中的换算比例是多少包为一箱，假设20包为一箱，那么辅助单位的换算比例为 20。
      </el-alert>
    </div>
    <template v-if="units.length > 0">
      <div
        v-for="(item, index) in units"
        :key="index"
        class="unit-info"
      >
        <div class="unit-info__data">
          <div class="label">单位名称</div>
          <el-input
            v-model="units[index].unit"
            placeholder="请输入单位名称"
          />
        </div>
        <div class="unit-info__data">
          <div class="label">换算比例</div>
          <el-input-number
            v-model="units[index].conversionRatio"
            :min="1"
            :max="99999"
            :disabled="isEdit"
            style="width: 100%;"
          />
        </div>

        <div class="unit-info__action">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="removeUnit(index)"
          />
        </div>
      </div>
    </template>

    <div v-else>
      <el-empty description="暂未添加辅助单位" />
    </div>

    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="addUnit">添加</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>

import { cloneDeep } from 'lodash-es'

export default {
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false
    },

    unitList: {
      type: Array,
      default: () => []
    },

    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      units: [{ unit: '', conversionRatio: null }],
      removeItems: []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit('update:visible', value)
      }
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(n) {
        if (n) {
          if (Array.isArray(this.unitList) && this.unitList.length > 0) {
            this.units = cloneDeep(this.unitList)
          }
        }
      }
    }
  },
  methods: {

    addUnit() {
      if (this.units.length >= 2) return this.$message.error('最多添加2个辅助单位')
      this.units.push({
        unit: '',
        conversionRatio: null
      })
    },

    closeCallback() {
      this.units = this.$options.data().units
    },

    cancel() {
      this.$emit('update:visible', false)
    },

    removeUnit(index) {
      this.units.splice(index, 1)
    },

    validate() {
      return new Promise(resolve => {
        let failed = 0
        this.units.forEach(item => {
          if (!item.unit || !item.conversionRatio) {
            failed = 1
            return
          }
        })

        if (failed > 0) resolve(false)
        resolve(true)
      })
    },

    async confirm() {
      const res = await this.validate()
      if (!res) return this.$message.error('请将信息填写完整')

      this.$emit('confirm', this.units)
      this.$emit('update:visible', false)
    }

  }
}
</script>
<style lang="scss" scoped>
.unit-info {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  &__data {
    width: 45%;
    .label {
      margin-bottom: 10px;
    }
  }

}
</style>
